import React from 'react';
import {Card} from 'antd';
import './ui.less';
import Row from "antd/lib/grid/row";
import Col from "antd/lib/grid/col";
import Modal from "antd/lib/modal";


//简小精悍，简单的信息提示
export default class Gallery extends React.Component {
    state={
        visible:false
    };
    showModal = (imgSrc) => {
        this.setState({
            imgSrc:'/gallery/'+imgSrc,
            visible:true
        })

};

    render() {
        const imgs = [
            ['1.png', '2.png', '3.png', '4.png', '5.png'],
            ['11.png', '12.png', '13.png', '14.png', '15.png'],
            ['21.png', '22.png', '13.png', '24.png', '25.png'],
            ['21.png', '22.png', '13.png', '24.png', '25.png']

        ];

        const imgList = imgs.map((list) => list.map((item) =>

            <Card
            cover={<img  src={'/gallery/'+item}/>}
            onClick={() => this.showModal(item)}
            style={{marginBottom:10}}
            >
                <Card.Meta
                title="react admin "
                description="react i will got it!!"
                />
            </Card>
        ));

        return (
            <div>
               <Row gutter={10}>
                   <Col span={6}>{imgList[0]}</Col>
                   <Col span={6}>{imgList[1]}</Col>
                   <Col span={6}>{imgList[2]}</Col>
                   <Col span={6}>{imgList[3]}</Col>
               </Row>

                <Modal
                    height={500}
                    width={300}
                    visible={this.state.visible}
                    onCancel={() => this.setState({
                       visible:false
                   })}
                    title="图片画廊"
                   footer={null}

                >
                    <img src={this.state.imgSrc} style={{width:'100%'}} />

                </Modal>

            </div>
        )
    }

}
